<template>
  <view class="container">
    <!-- 底部抽屉 -->
    <u-popup :show="show" :round="10" @close="show=false" :closeable="true" :safe-area-inset-bottom="true" bgColor="#191919">
      <view class="drawer-content">
        <text class="title">修改信息</text>
        <text class="tip">请授权获取您的头像和昵称</text>
        <!-- 头像选择 -->
        <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
          <image :src="avatarUrl || '/static/img/avatar.png'" class="avatar" />
        </button>
        <!-- 昵称输入 -->
        <input type="nickname" class="nickname-input" v-model="nickName" placeholder="请输入昵称" />
        <!-- 确认按钮 -->
        <u-button @click="handleConfirm" color="#000"  shape="circle"  type="primary" :disabled="!avatarUrl && !nickName" custom-style="margin-top: 40rpx">
          确认
        </u-button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getMyInfoApi, updateWxInfo } from "@/sheep/api/baseApi";
import { baseUrl, clientId } from "@/sheep/request/baseUrl";
export default {
  data() {
    return {
      show: false,
      avatarUrl: "",
      avatarId: "",
      nickName: "",
    };
  },
  methods: {
    // 获取头像
    onChooseAvatar(e) {
      this.avatarUrl = e.detail.avatarUrl;
    },
    // 确认处理
    async handleConfirm() {
      if (!this.avatarUrl && !this.nickName) {
        uni.showToast({ title: "请先完善信息", icon: "none" });
        return;
      }
      // 这里可以提交用户信息到服务器
      let that = this;
      uni.showLoading({
        title: "加载中",
      });
      uni.uploadFile({
        url: baseUrl + "/resource/oss/upload",
        filePath: that.avatarUrl,
        name: "file",
        header: {
          Authorization: "Bearer " + uni.getStorageSync("token"),
          clientId: clientId,
        },
        success: async (uploadFileRes) => {
          // 注意：这里返回的uploadFileRes.data 为JSON 需要自己去转换
          let data = JSON.parse(uploadFileRes.data);
          if (data.code === 200) {
            that.avatarUrl = data.data.url;
            that.avatarId = data.data.ossId;
            await that.updateAvatar();
          }
        },
        fail: (error) => {
          that.updateAvatar();
        },
        complete: () => {
          uni.hideLoading();
        },
      });
      // 关闭抽屉
      this.show = false;
    },
    async updateAvatar() {
        updateWxInfo({ nickName: this.nickName, avatar: this.avatarId }).then(
            (res) => {
                if (res.code == 200) {
                    getMyInfoApi().then((res) => {
                        this.show = false;
                        this.$emit("getMyInfo");
                    });
                }
            }
        );
    },
    open(name, url) {
      this.nickName = name;
      this.avatarUrl = url;
      this.show = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
}

.drawer-content {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .title {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    color: #fff;
  }

  .tip {
    color: #999;
    margin-bottom: 40rpx;
  }

  .avatar-wrapper {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 1;

    &::after {
      border: none;
    }

    .avatar {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      border: 2rpx solid #eee;
    }
  }

  .nickname-input {
    width: 80%;
    height: 80rpx;
    margin: 40rpx 0;
    padding: 0 20rpx;
    border-bottom: 1rpx solid #eee;
    text-align: center;
    color: #fff;
  }
}
</style>
